"use client"

import Link from "next/link"
import Image from "next/image"
import { usePathname } from "next/navigation"

export default function Sidebar() {
  const pathname = usePathname()

  const isLinkActive = (path: string) => {
    return pathname === path
  }

  return (
    <aside className="w-64 bg-gray-800 text-white p-6 flex flex-col h-full">
      <div className="flex items-center mb-8">
        <div className="mr-2">
          <Image src="/images/writing.png" alt="Logo" width={30} height={30} />
        </div>
        <h1 className="text-xl font-bold">签名认证系统</h1>
      </div>

      <nav className="flex-1">
        <Link
          href="/dashboard"
          className={`flex items-center p-3 rounded-md mb-2 transition duration-200 ${
            isLinkActive("/dashboard") ? "bg-blue-600 text-white" : "hover:bg-gray-700"
          }`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 mr-3"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <rect x="3" y="3" width="7" height="7"></rect>
            <rect x="14" y="3" width="7" height="7"></rect>
            <rect x="14" y="14" width="7" height="7"></rect>
            <rect x="3" y="14" width="7" height="7"></rect>
          </svg>
          <span>控制面板</span>
        </Link>

        <Link
          href="/dashboard/user-info"
          className={`flex items-center p-3 rounded-md mb-2 transition duration-200 ${
            isLinkActive("/dashboard/user-info") ? "bg-blue-600 text-white" : "hover:bg-gray-700"
          }`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 mr-3"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
          <span>个人信息维护</span>
        </Link>

        <Link
          href="/dashboard/signature-data"
          className={`flex items-center p-3 rounded-md mb-2 transition duration-200 ${
            isLinkActive("/dashboard/signature-data") ? "bg-blue-600 text-white" : "hover:bg-gray-700"
          }`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 mr-3"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
          </svg>
          <span>签名数据维护</span>
        </Link>

        <Link
          href="/dashboard/verification"
          className={`flex items-center p-3 rounded-md mb-2 transition duration-200 ${
            isLinkActive("/dashboard/verification") ? "bg-blue-600 text-white" : "hover:bg-gray-700"
          }`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 mr-3"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
          <span>手写签名认证</span>
        </Link>

        <div className="border-t border-gray-700 my-4"></div>

        <Link
          href="/admin"
          className={`flex items-center p-3 rounded-md mb-2 transition duration-200 ${
            isLinkActive("/admin") ? "bg-blue-600 text-white" : "hover:bg-gray-700"
          }`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 mr-3"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle cx="8.5" cy="7" r="4"></circle>
            <line x1="20" y1="8" x2="20" y2="14"></line>
            <line x1="23" y1="11" x2="17" y2="11"></line>
          </svg>
          <span>管理员控制台</span>
        </Link>
      </nav>

      <div className="mt-auto">
        <Link
          href="/login"
          className="flex items-center p-3 rounded-md text-red-300 hover:bg-gray-700 transition duration-200"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 mr-3"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
            <polyline points="16 17 21 12 16 7"></polyline>
            <line x1="21" y1="12" x2="9" y2="12"></line>
          </svg>
          <span>退出登录</span>
        </Link>
      </div>
    </aside>
  )
}
